<template>
  <ul>
    <li class="item" v-for="todo in todos" :key="todo.id">
      <!--
      我们为每个 todo 准备了一个插槽，
      将 `todo` 对象作为一个插槽的 prop 传入。
      -->
      <slot name="todo" :todo="todo">
        <!-- 后备内容 -->
        {{ todo.text }}
      </slot>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    todos: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="stylus" scoped>
  .item
    padding : 30px 0
    text-align : center
    font-size : 28px
    border-bottom : .5px solid #efefef
</style>
